<template>
	<view class="cu-list menu sm-border card-menu" style="margin:0;border-radius:0 ;">
		<view style="text-align: left;height:80upx;line-height: 80upx;padding:0 30upx;font-size:30upx">
			<text class=" text-grey">{{$t('JLink.buy.Specification')}}</text>
		</view>
		<view style="margin-left:50upx">
			<view style="text-align: left;">
				<template v-if="urlParams.classifyId&&urlParams.classifyId!='net.cellular'">
					<button v-for="(paid,index) in specifications" :key="index"
						class="cu-btn" :class="checks==paid.buyNum ? 'line-orange text-orange':'line-grey text-grey'"
						style="margin-right:16upx;margin-bottom:26upx;" @tap="selectBuyNum(paid)">
						<view>{{paid.buyNum}}
							<text v-if="paid.buyUnit==0">
								<text v-if="paid.buyNumber%12===0">{{paid.buyNum/12}}{{$t('JLink.buy.Y')}}</text>
								<text v-else>
									<text v-if="paid.buyNum==1">{{$t('JLink.buy.Month')}}</text>
									<text v-else>{{$t('JLink.buy.Months')}}</text>
								</text>
							</text>
							<text v-if="paid.buyUnit==1">
								<text v-if="paid.buyNum==1">{{$t('JLink.buy.Year')}}</text>
								<text v-else>{{$t('JLink.buy.Y')}}</text>
							</text>
							<text v-if="paid.buyUnit==2">
								<text v-if="paid.buyNum==1">{{$t('JLink.buy.Day')}}</text>
								<text v-else>{{$t('JLink.buy.D')}}</text>
							</text>
						</view>
					</button>
				</template>
				<template v-else>
					<button v-for="(paid,index) in specifications" :key="index"
						class="cu-btn" :class="checks==paid.id ? 'line-orange text-orange':'line-grey text-grey'"
						style="margin-right:16upx;margin-bottom:26upx;" @tap="selectBuyNum(paid)">
						<view>{{paid.label}}</view>
					</button>
				</template>
			</view>
		</view>

	</view>
</template>

<script>
export default {
  props: {
    // 规格
    specifications: {
      type: Array,
      default: () => {
        return []
      }
    },
    buyNum:{
      type:[String,Number],
      default:0
    },
    urlParams:{
      type:Object,
      default:()=>{
        return {
          deviceId: '',
          channel: '',
          classifyId: ''
        }
      }
    }
  },
	data() {
	    return {
        checks:null,
        urlParamsData:{}
		}
	},
  watch:{
    buyNum(val){
      this.checks=val
    },
    urlParams(val){
      this.urlParamsData=val
    }
  },
	methods: {
    // 支付时长选择
    selectBuyNum (paid){
      const {buyNum,id} = paid;
      this.checks = this.urlParamsData.classifyId&&this.urlParamsData.classifyId!='net.cellular' ? buyNum : id;
      this.$emit('selectBuyNum',paid)
    }
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
